<template>
  <div id="app">
    <div v-for="(item, index) in wordarr" :key="index">
      <div class="word">
        <span>
          <span class="fullword" v-if="item.value.length">
            <!-- 这是正需要输入的字体 -->
            <span
              v-for="(str, idx) in item.word.slice(0, item.value.length)"
              :key="str + idx"
              :style="{
                color: '#fff',
                backgroundColor: issome(item, idx) ? '#ccc' : '#ff6600',
              }"
            >
              {{ str }}
              <span
                v-if="str === ' '"
                :style="{
                  padding: '0 5px',
                  color: isSpacetrue(str, item, idx) ? '#ccc' : '#ff6600',
                }"
              ></span>
            </span>
          </span>

          <!-- 这是待输入字 -->
          <span
            v-for="(isstr, isidx) in item.word.slice(
              item.value.length === 0 ? '' : item.value.length
            )"
            :key="isstr + isidx"
          >
            {{ isstr }}
            <span
              v-if="isstr === ' '"
              :style="{
                padding: '0 5px',
              }"
            ></span>
          </span>
        </span>
      </div>
      <input
        type="text"
        class="wording"
        v-model="item.value"
        :disabled="count(index)"
        :ref="recordhang === index ? 'inpref' : 'uniptref'"
        :style="{
          backgroundColor: count(index) ? '#ccc' : '#fff',
        }"
      />
    </div>
    <p
      v-if="this.recordhang === this.wordarr.length"
      :style="{
        'font-size': '40px',
        color: 'red',
      }"
    >
      {{ msg }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /** 这是需要打字的数据 */
      word: ' Vue易用已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！ 灵活不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效20kB min+gzip 运行大小超快虚拟 DOM最省心的优化',
      /** 这是分解打字数据存放的数组 */
      wordarr: [],
      /** 这是打字规定每行多少字 */
      wordtype: 60,
      /** 这是当前输入第几行 */
      recordhang: 0,
      msg: '已经输入完毕，统计打字速度展示待补充',
    };
  },
  computed: {
    /** 计算这一行是否已经输入完整，控制输入框disable属性 */
    count() {
      return function (index) {
        return !this.wordarr[index].isfull;
      };
    },
    /** 判断字是否打对 */
    issome() {
      return function (item, index) {
        return item.value[index] === item.word[index];
      };
    },
    /** 判断当前输入的这个字符串是不是空格 */
    isSpace() {
      return function (str) {
        return str === ' ';
      };
    },
    /** 确定 空格是否输入正确 */
    isSpacetrue() {
      return function (str, item, idx) {
        return str === ' ' && str === item.value.slice(idx, idx + 1);
      };
    },
  },
  created() {
    /** 初始化进入页面首先把字体数据编程数组 ，好渲染界面 */
    for (let i = 0; i < this.word.length / this.wordtype; i++) {
      let str = this.word.slice(this.wordtype * i, this.wordtype * (i + 1));
      this.wordarr.push({
        word: str,
        value: '',
        isfull: false,
      });
    }
    this.wordarr[0].isfull = true;
  },

  watch: {
    wordarr: {
      deep: true, //深度
      handler(newval, oldval) {
        //可以实时监听到新值newVal的变化
        newval.forEach((e, i) => {
          /** 监听数据变化，如果输入完整，需要换行 */
          if (e.value.length >= e.word.length) {
            if (this.recordhang === i) {
              /** 就把记录行数+1 */
              this.recordhang = i + 1;
              /** 防止输入更多字符 */
              if (
                this.recordhang === 0 ||
                (this.wordarr[i] && this.wordarr[i + 1])
              ) {
                //非空判断防止报错
                this.wordarr[i].value = oldval[i].value;
                this.wordarr[i].isfull = false;
                this.wordarr[i + 1].isfull = true;
              }
              setTimeout(() => {
                this.$refs?.inpref[0]?.focus();
              });
            }
          }
          if (this.recordhang === this.wordarr.length) {
            this.wordarr[this.wordarr.length - 1].isfull = false;
          }
        });
      },
    },
  },
};
</script>

<style scoped>
#app {
  width: 100%;
  /* margin: 0 auto; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.word,
.wording {
  width: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid #000;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border-bottom: 0;
}

.wording {
  border-top: 1px dashed;
}

span {
  height: 50px;
  line-height: 50px;
  display: flex;
}
</style>
